<template>
    <breadcrumb path="produce/list" value="产品/列表"></breadcrumb>
    <SearchList></SearchList>
    <div class="sub-div-center list">
        <div v-for="item in 6" class="item">
            <ul>
                <li class="img"></li>
                <li class="fonttype1">howo Engine Parts</li>
                <li class="fonttype2">Chinese Truck</li>
                <li class="fonttype2">Howo Valve Lock</li>
                <li class="fonttype2">Clamp</li>
                <li class="fonttype2">VG1246050028</li>
                <li class="sub-div-center">
                    <button style="display: block;">Read More</button>
                </li>
            </ul>
        </div>
    </div>
    <!-- 分页 -->
    <mypagination></mypagination>
</template>

<script setup>
import breadcrumb from '@/views/component/Breadcrumb.vue';
import mypagination from '@/views/component/MyPagination.vue';
import SearchList from '../component/SearchList.vue';
</script>

<style scoped>
.list{
    flex-wrap:wrap;
}
.item{
    width: 42vw;
    margin: 1rem;
}
.fonttype1{
    color: #808080;
    font-size: 1.8rem;
}
.fonttype2{
    font-size: 2rem;
    font-style: 800;
}
.img{
    width: 42vw;
    height: 42vw;
    background-color: azure;
}
button{
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    width: 100%;
    font-size: 2rem;
    color: white;
    font-weight: 800;
    height: 4rem;
}
</style>